<template>
  <view class="details-container">
    <!-- 显示积分模块 -->
    <view class="info">
      <view class="header">我的积分总数</view>
      <view class="main">
        {{ getSumCredits }}
      </view>
      <view class="footer" @click="toShowIntroduction">
        <uni-icons type="help" color="#fff"></uni-icons>
        <span>积分说明</span>
      </view>
    </view>
    <!-- 显示积分流水账 -->
    <view class="details">
      <CreditsDetails :list="detailsList"></CreditsDetails>
    </view>
    <!-- 普通弹窗  显示明细内容 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="introduction-content">
          <view class="title">积分说明</view>
          <view class="content">
            <p>积分说明内容</p>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import CreditsDetails from '../components/creditsDetails.vue';
import { mapState, mapActions } from 'vuex';
export default {
  data () {
    return {};
  },
  components: {
    CreditsDetails
  },
  onLoad () {
    this.getCreditsList(this.token)
  },
  methods: {
    // vuex 中调用异步方法 请求接口数据获取【明细列表】
    ...mapActions('credits', ['getCreditsList']),
    toShowIntroduction () {
      this.$refs.popup.open('top')
    }
  },
  computed: {
    // vuex 中获取明细列表
    ...mapState('credits', ['detailsList']),
    ...mapState('user', ['token']),
    getSumCredits () {
      return this.detailsList.reduce((sum, item) => {
        return (sum += item.pointChange)
      }, 0);
    }
  }
};
</script>

<style lang="scss">
.details-container {
  .info {
    background: linear-gradient(#45a7fe, #55d4ff);
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10rpx;
    color: #f1f1f1;

    .header {
      font-size: 32rpx;
    }

    .main {
      font-size: 2em;
      color: #c00000;
      text-shadow: 4rpx 4rpx 10rpx darkgray;
    }

    .footer {
      color: #fff;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;

      span {
        margin-left: 5rpx;
      }
    }
  }

  .details {}

  .popup-content {
    .introduction-content {
      box-sizing: border-box;
      padding: 20rpx 10rpx;
      height: 30vh;

      .title {
        font-weight: 700;
        font-size: 38rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
      }

      content {
        font-size: 24rpx;

        p {
          text-indent: 2em;
        }
      }
    }
  }
}
</style>
